這一篇開始會整理在 React 中常見，但是我不熟悉或沒使用過的 CSS 處理方案。前端開發中 CSS 也是相當重要的一部分，通常都會採用一些 CSS 處理方案來解決原生 CSS 常遇到的問題。常見的有預處理器 sass、less ，模組化的有 css-module、postcss，再到 css-in-js 等等，這些處理方案都能使我們更方便的處理 CSS 樣式問題。這一篇主要是針對我自己比較不熟悉的 css-module 做筆記整理。

css-module

css-module 是一種模組化的 CSS 方案，有著可以任意命名 class、組合 class、class繼承等特性。在 create-react-app 中默認支持 css-module，使用方式如下：

• CSS 檔以 [name].module.css 或 [name].module.scss 的方式命名
• 以變數形式導入 CSS 文件，例如 import styles from './style.module.css'
• className 以變數引用的方式添加，例如 className={ styles.title}

hash class 任意命名

css-module 會在 class 後面添加 hash 值，讓使用者任意的命名 CSS 而不必去擔心重複命名或污染全域 CSS，例如下面的範例

import styles from './style.module.css'

const App = (props) => {
    return <div className="wrap">
        <h2 className={ styles.title }>hello world</h2>
    </div>
}

經過 css-module 編譯過後會將 class 轉成一個唯一沒有重複的 class，如下面的範例

<h2 class="style_title__s0dsl">
hello world
</h2>

非 hash class (global(.className))

css-module 允許使用 :global(.className) 的語法，可以直接宣告一個全域的 class，只要經由這種語法宣告，都不會被編譯成 hash class。

/*  默認 hash  */
.title {
    color: red;
}
/* global */
:global(.wrap) {
    color: white;
    background: blue;
}
/* 編譯後 */

.style_title__s0dsl {
    color: red;
}
.wrap {
    color: white;
    background: blue;
}

在 HTML 中使用 global class 的寫法則是像普通 class 的寫法一樣

import styles from './style.module.css'

const App = () => {
    return <div>
        <h2 className={ styles.title }>this is hash</h2>
        <h2 className="wrap">this is global</h2>  
    </div>
}

class 組合 composition

在 css-module 中，可以用一個 class 可以去繼承另一個 class 的 CSS 屬性，這被稱作組合 (composition)，如下面，我們先建立了一個 .title class，當有其他 class 也需要用到和 .title 類似的 CSS 屬性，但需要再稍微客製化或添加其他屬性，我們就可以用 composes 去繼承 .title 的屬性，就像範例中使用 .negativeTitle 來繼承屬性。

.title {
    font-size: 18px
    color: blue;
}

/* negativeTitle 利用 composes 去繼承 title 的 css */
.negativeTitle {
    composes: title;
    color: red;
}

class 模組繼承

透過 css-module 也可以去繼承其他 CSS 檔裡面的 CSS 屬性，如下面有一個 color.css 檔案，用來存放顏色相關的 CSS

/* color.css */
.primary {
    color: blue;
}

我們可以透過 composes 和 from 去繼承 color.css 中的屬性

.title {
    composes: primary from './ color.css';
    font-size: 18px;
}

使用變數

css-module 也支援使用變數，但必須透過安裝 PostCSS 和 postcss-modules-values 來實現，如下面先用 @value 定義一些共用的顏色變數，之後就可以在 class 中直接使用那幾個變數。通常在製作網站時，都會有一些常用的主題色、我們就可以利用變數來定義主題色，之後全部套用，未來如果有需要修改主題色，也只要改用變數就能一次套用在所有 class 上，而不用逐一修改。

//定義變數
@value white: #fff;
@value black: #33333;

.title {
    color: white;
    background: black;
}

css-module 與 sass 組合運用

css-module 與 sass 都是相當好用的 CSS 處理工具，但是也各有不足之處，像是 css-module 不支持 CSS 巢狀寫法，而 sass 也不支援 hash class 的方式。不過在 create-react-app 中是允許結合這兩者做使用的，使用方式是將檔案名從 [name].module.css 改成 [name].module.scss

// 檔名為 style.module.scss
.wrap {
    background: blue;
    .title {
        font-size: 18px
        color: blue;
    }

    /* negativeTitle 利用 composes 去繼承 title 的 css */
    .negativeTitle {
        composes: title;
        color: red;
    }
}

小結

這一篇主要是整理 css-module 的使用方式，下一篇會針對 postcss、styled-components 做整理。